<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="jakarta.faces.core"
                xmlns:ui="jakarta.faces.facelets" xmlns:p="http://primefaces.org/ui"
                template="/template_pop.xhtml"
                xmlns:h="jakarta.faces.html">
    <ui:define name="content">
        
           <style>
                   .ui-md-2 {
    width: 6%;
}
                   
      .ui-orderlist .ui-orderlist-list {

    height: 500px;

}
        </style>
            <div class="card">
        <h5>Advanced</h5>
        <p:orderList value="#{sysAreaMBean.childrens}" var="node" itemValue="#{node}"
                    controlsLocation="left" responsive="true">

            <p:ajax event="reorder" listener="#{sysAreaMBean.onReorder}" update="msgs"/>

            <f:facet name="caption">Available</f:facet>



            <p:column>
                <h:outputText value="#{node.name}"/>
            </p:column>
        </p:orderList>
            </div>

    </ui:define></ui:composition>